<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
	<th:block th:include="include :: header('新增社区员')" />
</head>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <form class="form-horizontal m" id="form-communityManager-add">
			<div class="form-group">	
				<label class="col-sm-3 control-label">姓名：</label>
				<div class="col-sm-8">
					<input id="name" name="name" class="form-control" type="text">
				</div>
			</div>
			<div class="form-group">	
				<label class="col-sm-3 control-label">性别：</label>
				<div class="col-sm-8">
					<div class="input-group" style="width: 100%">
						<select name="gender" class="form-control m-b" th:with="type=${@dict.getType('sys_user_sex')}">
							<option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
						</select>
					</div>
				</div>
			</div>
			<div class="form-group">	
				<label class="col-sm-3 control-label">手机号：</label>
				<div class="col-sm-8">
					<input id="phone" name="phone" class="form-control isMobile" type="text">
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label">密码：</label>
				<div class="col-sm-8">
					<input id="text" name="password" class="form-control" type="text">
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label">社区：</label>
				<div class="col-sm-8">
					<select id="community" onchange="selectVillages()" name="community" class="form-control m-b" th:with="type=${@address.selectAllcommunity()}">
						<option value="all">全部社区</option>
						<option th:each="address : ${type}" th:text="${address.community}" th:value="${address.community}"></option>
					</select>
				</div>
			</div>
			<div class="form-group">	
				<label class="col-sm-3 control-label">管辖小区：</label>
				<div class="col-sm-8" id="village">
				</div>
			</div>
			<div class="form-group">	
				<label class="col-sm-3 control-label">状态：</label>
				<div class="col-sm-8">
					<div class="input-group" style="width: 100%">
						<select name="status" class="form-control m-b" th:with="type=${@dict.getType('sys_incumbency_status')}">
							<option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
						</select>
					</div>
				</div>
			</div>
		</form>
	</div>
    <div th:include="include::footer"></div>
    <script type="text/javascript">
		$(document).ready(function() {
			jQuery.validator.addMethod("isMobile", function(value, element) {
				var length = value.length;
				var mobile = /^1[3-9]+\d{9}$/;
				return this.optional(element) || (length == 11 && mobile.test(value));
			}, "请正确填写手机号码");

			$.ajax({
				url: "/system/address/selectVillageBycommunity?name=all",
				type: "get",
				contentType: "application/json",
				timeout: 30000, //超时时间：30秒
				async: false,//false-同步（当这个ajax执行完后才会继续执行其他代码）；异步-与其他代码互不影响，一起运行。
				success: function (data) {
					$("#village").html("");
					if (data!=null&&data.length>0){
						for (var i = 0; i <data.length; i++) {
							var id=data[i].id;
							var village=data[i].village;
							$("#village").append('<label class="checkbox-inline check-box"><input name="village" type="checkbox" value="'+id+'">'+village+'</label>')
						}
					}
				}, error: function (data) {
					console.log(data);
				}
			})




		})

		var prefix = ctx + "system/communityManager"
		$("#form-communityManager-add").validate({
			rules:{
				name:{
					required:true,
				},
				gender:{
					required:true,
				},
				password:{
					required:true,
				},
				status:{
					required:true,
				},
				village:{
					required:true,
				}
			},
			focusCleanup: true
		});
		
		function submitHandler() {
	        if ($.validate.form()) {
	            $.operate.save(prefix + "/add", $('#form-communityManager-add').serialize());
	        }
	    }
	function selectVillages() {
	var  community =$("#community").val();
	if (community!=1){
		$.ajax({
			url: "/system/address/selectVillageBycommunity?name="+community,
			type: "get",
			contentType: "application/json",
			timeout: 30000, //超时时间：30秒
			async: false,//false-同步（当这个ajax执行完后才会继续执行其他代码）；异步-与其他代码互不影响，一起运行。
			success: function (data) {
				debugger
				$("#village").html("");
				if (data!=null&&data.length>0){
					for (var i = 0; i <data.length; i++) {
					var id=data[i].id;
					var village=data[i].village;
					$("#village").append('<label class="checkbox-inline check-box"><input name="village" type="checkbox" value="'+id+'">'+village+'</label>')
					}
				}
			}, error: function (data) {
				console.log(data);
			}
		})

	}else {
		$("#village").html("");
	}
	}

	</script>
</body>
</html>
